<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
    <style>
      /* 给h1设置初始位置 */
      .s1 h1 {
        transform: translate(-100%) rotate(720deg) skew(360deg) scale(3);
        transition: all 3s;
      }

      /* 设置图片初始位置 */
      .s1 img {
        width: 100%;
        /* transform: translate(-100%); */
        transform: scale(0);
      }

      /* 对图片做动画 */

      .s1 img.activeImg {
        /* animation:动画名  动画时间  动画延迟时间   动画速度    动画次数   动画是否停留在结束的地方[forwards] */
        animation: imgMove 3s 2s linear 1 forwards;
      }

      @keyframes imgMove {
        0% {
        }

        100% {
          /* transform: translate(0%); */
          transform: scale(1) rotate(3600deg) skew(360deg);
        }
      }

      .fixedImg .active {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: fixed;
        right: 10px;
        top: 10px;
        z-index: 9999;

        animation: music 2s linear infinite;
      }

      @keyframes music {
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <!-- <img class="fixedImg" src="./img.png" alt="" /> -->
    <div class="fixedImg">
      <img
        class="active"
        style="
          width: 50px;
          height: 50px;
          border-radius: 50%;
          position: absolute;
          top: 0;
          right: 0;
        "
        src="./img.png"
        alt=""
      />

      <audio src="Jean Roch-Can You Feel It (Big Ali Edit).mp3"></audio>

      <img
        style="
          width: 50px;
          height: 50px;
          border-radius: 50%;
          position: absolute;
          top: 0;
          right: 0;
        "
        src="./img2.png"
        alt=""
      />
    </div>
    <div id="fullpage">
      <div class="section s1">
        <h1>我是第一屏</h1>
        <img src="./img.png" alt="" />
      </div>
      <div class="section s2">Some section</div>
      <div class="section">Some section</div>
      <div class="section">Some section</div>
    </div>
  </body>

  <script>
    $(document).ready(function () {
      $(".fixedImg img").on("click", function () {
        var flag = $(this).hasClass("active");
        //console.log(flag);
        if (flag) {
          $(this)
            .removeClass("active")
            .hide()
            .siblings()
            .addClass("active")
            .show();

          //  有active   就播放
        } else {
          $(this)
            .addClass("active")
            .show()
            .siblings()
            .removeClass("active")

            .hide();
        }

        //  判断是否在播放
        if ($("audio")[0].paused) {
          $("audio")[0].play(); //  play()和pause()是dom方法只能dom对象调用
        } else {
          $("audio")[0].pause();
        }
      });

      $("#fullpage").fullpage({
        sectionsColor: ["red", "green", "yellow"],
        navigation: true,
        onLeave: function (index, nextIndex, direction) {
          //  滚动前触发
          // alert(1111);
        },

        afterLoad: function (anchorLink, index) {
          //  滚动到某一屏后的回调函数   加载完毕后立刻执行
          //alert(2222)
          $(".s1 h1").css({
            transform: "translate(0) rotate(0deg) skew(0deg)  scale(1)",
          });

          $(".s1 img").addClass("activeImg");
        },
      });
    });
  </script>
</html>
